<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>在最深的海洋里</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


    <style>
        canvas, body {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        body {
            background: url(src/ocean.jpg) center;
            background-size: cover;
        }


    </style>
</head>
<body>

<div></div>

<script>
  "use strict";function init(){canvas.width=window.innerWidth,canvas.height=window.innerHeight}function fish(){this.pos={x:Math.random()*canvas.width*.9+.1*canvas.width,y:Math.random()*canvas.height*.9+.1*canvas.height},this.speed=1,this.vx=Math.random()*this.speed/4,this.vy=Math.random()*this.speed/4,this.history=[],this.target=new Image,this.target.src="src/fish.png"}function pawpaw(){this.deg=0,this.per=Math.PI/180,this.radius=10*Math.random()+6,this.speed=4*Math.random()+4,this.pos={oldx:Math.random()*canvas.width*.8+.1*canvas.width,oldy:canvas.height+Math.random()*canvas.height}}function animate(){ctx.clearRect(0,0,canvas.width,canvas.height),fishs.length<maxNumFish&&fishs.push(new fish),fishs=fishs.filter(function(t){return t.animate()}),pawpaws.length<30&&pawpaws.push(new pawpaw),pawpaws=pawpaws.filter(function(t){return t.animate()}),requestAnimationFrame(animate)}var canvas=document.createElement("canvas");document.body.appendChild(canvas);var ctx=canvas.getContext("2d"),maxNumFish=144,a=canvas.width/2,b=canvas.height/2,r=300;init(),window.addEventListener("resize",init);var fishs=[];fish.prototype.animate=function(){if(this.history.length>1&&this.history.shift(),this.pos.x+=this.vx,this.pos.y+=this.vy,this.vx=.98*this.vx+.12*(Math.random()*this.speed*2-this.speed),this.vy=.98*this.vy+.12*(Math.random()*this.speed*2-this.speed),this.history.length>0){ctx.beginPath();for(var t=0;t<this.history.length;t++)ctx.drawImage(this.target,this.history[t].x,this.history[t].y);ctx.closePath()}return this.pos.x>canvas.width||this.pos.x<0||this.pos.y>canvas.height||this.pos.y<0?(delete this.pos,delete this.history,!1):(this.history.push({x:this.pos.x,y:this.pos.y}),!0)};var pawpaws=[];pawpaw.prototype.animate=function(){this.deg+=this.speed,this.pos.y=this.pos.oldy-this.deg*this.per*10,this.pos.x=this.pos.oldx+this.speed*Math.cos(this.deg*this.per);var t=ctx.createRadialGradient(this.pos.x,this.pos.y,0,this.pos.x,this.pos.y,this.radius);return t.addColorStop(0,"transparent"),t.addColorStop(.99,"rgba(25,162,186,1)"),ctx.beginPath(),ctx.fillStyle="rgba(25,162,186,.6)",ctx.arc(this.pos.x,this.pos.y,this.radius,-Math.PI,0),ctx.closePath(),ctx.fill(),ctx.beginPath(),ctx.fillStyle=t,ctx.arc(this.pos.x,this.pos.y,this.radius,0,2*Math.PI),ctx.closePath(),ctx.fill(),!(this.pos.x>canvas.width||this.pos.x<0||this.pos.y<0)},ctx.globalCompositeOperation="lighter",animate();

</script>

</body>
</html>
